<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css"/>
		<style type="text/css">
			.container .row img {
				border: 1px solid gainsboro;
			}
			.item{
				background-color: gainsboro;
				
			}
			.item p span{
				font-size: 20px;
				font-weight: bolder;
				color: red;
				margin-left: 10px;
			}
			.item p{
				margin: 40px 5px;
			}
			.right{
				position: relative;
			}
			.right p{
				margin-top: 25px;
			}
			.right p a{
				display: inline-block;
				width: 100px;
				height: 40px;
				color: white;
				background-color: red;
				font-size: 20px;
				text-align: center;
				line-height: 40px;
				margin-right: 30px;
			}
			.right p .gwc{
				
				width: 100px;
				height: 40px;
			}
			
		</style>
	</head>
	<body>
		<a href="cart.html">进入购物车</a>
		<div class="container">
			<div class="row">
				
			</div>
		</div>
	</body>
	<script src="bootstrap/dist/js/jquery.min.js" ></script>
	<script src="bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var id = localStorage.getItem("id");
		var yh = localStorage.getItem("yh")
		getGoods(id);
		
		function getGoods(id){
			$.ajax({
				type:"get",
				url:"http://127.0.0.1/w/website/findGoodsDetail",
				async:true,
				data:{
					info:id
				},
				success:function(res){
					console.log(res);
					var goods = res.data.detail.tbk_item_info_get_response.results.n_tbk_item[0];
					var img = goods.pict_url;
					var title = goods.title;
					var item_url = goods.item_url;
					var zk_final_price=goods.zk_final_price;
					var nick=goods.nick;
					var provcity = goods.provcity;
					var str = `
					   <div class="col-xs-12 col-md-4 col-md-offset-2"> 
					   <img class="img-responsive" src="${img}" > 
					   </div>
			           
		                <div class="col-xs-12 col-md-4 right"> 
					      <h4>${title}</h4>
					      <div class="item">
					        <p>店铺: &nbsp ${nick} </p>
					        <p>产地: &nbsp ${provcity} </p>
					        <p>促销: &nbsp 减${yh}元 </p>
					        <p>售价 <span>￥${zk_final_price}</span> </p>
						  
					      </div>
					       <p>
							<a href = "${item_url}">立即购买</a>
							<input class="gwc" type="button" value="加入购物车">
						   </p>
					    </div>
						
					`;
					$(".container .row").append(str);
					$(".gwc").click(function(){
						var str = localStorage.getItem("gwc");
						
						if(str){
//							有物品的时候
							var newGoods = JSON.stringify(goods);
							if(str.indexOf(newGoods) >=0 ){
								alert("已经加入购物车");
								return;
							}
							var arr = JSON.parse(str);
							arr.push(goods);
							str = JSON.stringify(arr);
							localStorage.setItem("gwc",str);
							alert("成功加入购物车");
						}else{
//							空购物车的时候
							var arr = [];
							arr.push(goods);
							str = JSON.stringify(arr);
							localStorage.setItem("gwc",str)
							alert("成功加入购物车");
						}
						
					})
				}
			});
		}
		
	
	</script>
</html>
